<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../cssmui/mui.min.css">
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<link href="../../cssmui/icons-extra.css" />
		<link href="../../css/app.css" rel="stylesheet" />	
		<script src='../../mui/mui.min.js'></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src='../../js/template-web.js'></script>	
		<script src="../../js/app.js"></script>
		<script src='../../js/jsondb.js'></script>		
		<script src="../../js/loadpicker.js"></script>

	</head>

	<body>

		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">
								<input type="text" class="mui-input-clear" name="contact" id="contact" extenddata="" value="" placeholder="选择交易方" />
								<input type="text" class="mui-input-clear" name="startdate" id="startdate" value="" placeholder="开始时间" />
								<input type="text" class="mui-input-clear" name="enddate" id="enddate" value="" placeholder="结束时间" />
							</div>
							<div style="margin: 10px;">
								<span id="offCanvasHide" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">关闭</span>
								<span id="clearsearchinput" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">清空</span>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查找</span>
							</div>
						</form>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasShow" href="#" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
					<h1 class="mui-title">进货</h1>
				</header>
				<div id="offCanvasContentScroll" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item" href="new">
						<span class="mui-tab-label">新增</span>
					</a>
					<a href="#bottomPopover" class="mui-tab-item mui-btn-link ">
						<span class="mui-tab-label">查看</span>
					</a>
				</nav>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" line="all">所有
					</li>
					<li class="mui-table-view-cell" line="planed">草拟
					</li>
					<li class="mui-table-view-cell" line="saved">已保存
					</li>
					<li class="mui-table-view-cell" line="signin">
						<span id="span_menu3">已签收</span>
					</li>
					<li class="mui-table-view-cell" line="cancel">已作废
					</li>
				</ul>
			</div>

		</div>
		<script src="../../js/myoffcanvas.js"></script>
		<script id="node_tpl" type="text/html">
			<li class="mui-table-view-cell " style="padding:4px; background-color: {{rowid%2==1?'#edffff':'#fbffff'}} ;" data-tag="{{_idkey}}">
				<div class="mui-row">
					<div class="mui-table-cell mui-col-sm-2 mui-col-xs-2" style="padding-left: 5px;padding-top: 5px;">
						<span class="mui-icon mui-icon-contact" style="color:#aaaaaa"></span>
						<span class="mui-ellipsis mui-h4" style="color:#777777">{{text}}</span>
					</div>
					<div class="mui-table-cell  mui-col-sm-10  mui-col-xs-10 " style="padding-left: 15px; ">
						<h4 class="mui-ellipsis" style="color:#555555"> ￥{{amount}}，约{{allweight}}kg</h4>
						<span class="mui-h5" style="color:#989898">{{sdate}}【{{statusname}}】</span>
						<p class="mui-h6 mui-ellipsis" style="color:#CF2D58">{{remark}}</p>
					</div>
				</div>
			</li>
		</script>

		<script>
			//--------表单属性
			var _PORS = "";
			var _statusname = '';

			//------------------声明 定义-------------

			var targetTab = ['io_item.html'];
			var _queryRS = null;
			var _tb_io = null;
			var _tb_contacts = null;
			var DICT_contact = null; //选择用的交易方
			var list_contact = null; //关联交易方
			var _where1 = {
				'status[': 0
			};

			//-----------初始化
			mui.init();
			mui.ready(function() {

				//---------------------事件-------------
				//------列表事件----------
				mui("#offCanvasContentScroll").on('tap', '.mui-table-view-cell', function() {
					var did = this.getAttribute("data-tag");
					//console.log(did);
					open(targetTab[0], {
						selectedid: did,
						pors: _PORS

					});
				});
				window.addEventListener('bechanged', function(e) {　 //获取参数值	
					//console.log('bechanged：'+e.detail.reload);
					if(e.detail.reload == 'list') //更新明细列表
					{
						refresh();
					}
				});
				//........上拉事件...............
				window.addEventListener("swipeup", function() {
					//console.log("_flag" + _flag)
					if(_flag == 1) {
						pullRefresh()
						var scroll = mui('#offCanvasContentScroll').scroll()
						//重新计算布局值，最大滚动的高度等等
						scroll.reLayout();
						//滚动到底部
						scroll.scrollToBottom(100);
						//console.log('到低了')
					}
					//console.log('swipeup')
				});
				var _flag = 0;
				G('offCanvasContentScroll').addEventListener('scrollend', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					_flag = 0;
					if(e.detail.y <= e.detail.maxScrollY) {
						_flag = 1
					}
				});
				//------------按钮事件--------------	

				mui("nav").on("tap", ".mui-tab-item", function() {
					var eventname = this.getAttribute("href")
					if(eventname == "new") {
						open(targetTab[0], {
							pors: _PORS
						}) //新增
					}
				});
				mui("#bottomPopover").on("tap", "li", function() {
					blur();
					var eventname = this.getAttribute("line")
					if(eventname == "planed") { //保存中的
						_where1 = {
							"status": 1
						}
						refresh();
					} else if(eventname == "saved") {
						_where1 = {
							"status": 2
						}
						refresh();
					} else if(eventname == "signin") {
						_where1 = {
							"status": 3
						}
						refresh();
					} else if(eventname == "cancel") {
						_where1 = {
							"status": 0
						}
						// 注意  ''==0
						refresh();
					} else if(eventname == "all") {
						_where1 = {
							"status[": 0
						}
						refresh();
					}
					mui("#bottomPopover").popover('hide');
				});

				//------------搜索表单事件--------------	
				G('offCanvasHide').addEventListener('tap', function() {
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('searchsubmit').addEventListener('tap', function(e) {
					refresh();
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('clearsearchinput').addEventListener('tap', function(e) {
					G('contact').value = ''
					G('contact').extenddata = ''
					G('startdate').value = ''
					G('enddate').value = ''
					document.activeElement.blur();
				});

				//-------------监听事件----------
				//监听数据改变的事件,选择供应商以后会改变部分字段
				//console.log('244 iolist')
			});

			function afterPlusReady() {

				var self = _self;
				//	console.log(self.pors)
				setPors(self.pors);
				_tb_io = new XCDBHelp('tb_io')
				loaddict();
				refresh();
				

			}
			//
			function setPors(p) {
				//console.log(p);
				_PORS = p;
				var title = '';
				switch(_PORS) {
					case 'b1':
						title = '采购记录';
						_statusname = '已签收';
						break;
					case 's1':
						title = '销售记录';
						_statusname = '已发货';
						break;
					case 'rb1':
						title = '采购退货记录';
						_statusname = '已退';
						break;
					case 'rs1':
						title = '销售退货记录';
						_statusname = '已收回';
						break;
				}
				G('span_menu3').innerHTML = _statusname;
				mui('header .mui-title')[0].innerHTML = title;
			}
			//----------载入字典--------------

			//搜索和关联用
			function loaddict() {
				if(DICT_contact == null) {
					var _tb_contacts = new XCDBHelp('tb_contacts')
					var i = (_PORS == 'b1' || _PORS == 'rb1') ? 1 : 2;

					var qs = _tb_contacts.where({
						"status": 1,
						"cgroup": i
					}).getList();
					//log(qs, 'purchase_list201')
					var data = _AW.select(qs, 'uname:text,_idkey:value,pysx:py')
					if(data == null) return;
					DICT_contact = data
					//	log(DICT_contact, 'purchase_list205')
					loadPicker('contact', DICT_contact);
					//	alert('ddd')
				}
				if(list_contact == null) {
					var _tb_contacts = new XCDBHelp('tb_contacts')
					var qs = _tb_contacts.getList();
					//log(qs, 'purchase_list201')
					var data = _AW.select(qs, 'uname:text,_idkey:value,pysx:py')
					if(data == null) return;
					list_contact = data

				}
				loadDateTimePicker('startdate', 'date')
				loadDateTimePicker('enddate', 'date')
			}

			//----------载入数据--------------	
			//------------加载剩余查询结果---------
			function pullRefresh() {
				if(_queryRS == null) return;
				var table = document.body.querySelector('.mui-table-view');
				var i = table.children.length
				//console.log('订单1:' + table.children.length)
				//console.log('订单2:' + _queryRS.length)

				var j = i + PAGESIZE;
				var len = (j < _queryRS.length) ? j : _queryRS.length;
				//console.log(i+','+PAGESIZE+' ,'+j+' ,' +len)
				for(; i < len; i++) {
					//	console.log(JSON.stringify(_queryRS[i]))
					k = _queryRS.length - 1 - i;
					//var li = dataToHtml(i, _queryRS[k]);
					//table.appendChild(li);
					_queryRS[k].rowid = k;
					table.innerHTML += dataToHtml(_queryRS[k]);
				}
				if(len == _queryRS.length)
					mui.toast("以上是全部单据");
				return len;
			}
			//---------------查询语句-------------		
			function queryList() {
				var q1 = _FF.getV('contact');
				var q2 = _FF.getV('startdate');
				var q3 = _FF.getV('enddate');
				var wheres = {
					"cid": q1,
					"[sdate": q2,
					"edate]": q3,
					"pors": _PORS
				};
				mui.extend(wheres, _where1);
				//log(wheres, 'purchaselist273')
				//console.log(JSON.stringify(wheres))
				var arr = _tb_io.where(wheres).getList();
				//console.log('arr.lengh'+arr.length)
				var arr1 = _AW.leftjoin(arr, list_contact, 'cid=value')
				//console.log(JSON.stringify(DICT_contact))
				//console.log(JSON.stringify(arr1))
				return arr1;
			}
			//-----------刷新查询结果-------------
			function refresh() {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = ''
				_queryRS = queryList();
				pullRefresh();
				//刷新滚动到顶部
				mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
				//	console.log('dddd');
			}

			//----------数据转模版-----------
			//<li class="mui-table-view-cell  mui-media li_selected" id="{{value.pid}}">
			function dataToHtml(row) {
				//log(row, 'list292')
				if(!_IS.isMap(row)) return;
				var status = row.status;
				row.statusname = (status == 1 ? '草拟' : status == 2 ? '已保存' : status == 3 ? _statusname : status == 4 ? '已归档' : '作废')
				return template('node_tpl', row);
			}
			//alert("tt")
			//console.log("")
			//---------页面准备-----------
		</script>
	</body>

</html>